.active_rank_wrap2 {
  min-height: 812px;
  border: 0.1px;
  padding-top: 0.1px;
  box-sizing: border-box;
  background-color: #72a7f7;
  background-image: url('../../../images/active/active_bg2.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  // transform: translateZ(0);
  -webkit-overflow-scrolling: touch;

  .active_time {
    text-align: center;
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    top: 274px;
    width: 275px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: url('../../../images/active/period_time.png');
    background-size: contain;
  }

  .top_wrap {
    // width: 180px;
    box-sizing: border-box;
    padding: 66px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    width: 353px;
    height: 222px;
    background: url('../../../images/active/top_wrap.png') no-repeat;
    background-size: contain;
    // justify-content: space-between;
    position: absolute;
    top: 316px;
    // padding-left: 4px;
    left: 50%;
    transform: translateX(-50%);
    .top_user {
      margin-top: 28px;
      box-sizing: border-box;
      width: 90px;
      height: 90px;
      text-align: center;
      // padding-left: 4px;
      position: relative;
      .avatar {
        font-size: 0;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        img {
          width: 100%;
          height: auto;
        }
      }
      .icon {
        position: absolute;
        left: 32px;
        top: -25px;
        width: 30px;
        height: 25px;
        background: url('../../../images/active/blue_icon.png') no-repeat;
        background-size: contain;
      }
      .name {
        margin-top: 10px;
        text-align: center;
        color: #fff;
        height: 25px;
        width: 90px;
        line-height: 25px;
        font-size: 12px;
        font-weight: 500;
        background: url('../../../images/active/top_name_bg2.png') no-repeat;
        background-size: contain;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      &:last-of-type {
        padding-left: 45px;
        .icon {
          position: absolute;
          left: 38px;
          top: -25px;
          width: 30px;
          height: 25px;
          background: url('../../../images/active/red_icon.png') no-repeat;
          background-size: contain;
        }
      }
    }
  }
  .top_points {
    position: absolute;
    top: 365px;
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    background: url('../../../images/active/point_icon.png') no-repeat 42% 50%;
    background-size: contain;
  }
  .love_icon {
    position: absolute;
    width: 117px;
    height: 80px;
    background: url(../../../images/active/top_love.png) no-repeat;
    background-size: contain;
    top: 402px;
    left: 50%;
    transform: translateX(-50%);
  }

  .button_menu {
    width: 346px;
    height: 78px;
    background: url('../../../images/active/button_bg2.png') no-repeat;
    background-size: contain;
    margin: 565px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 6px 14px 0 14px;

    .btn {
      height: 56px;
      width: 144px;
      text-align: center;

      &.left_un {
        background: url('../../../images/active/left_un2.png') no-repeat;
        background-size: contain;
      }

      &.left_active {
        height: 56px;
        background: url('../../../images/active/left_active.png') no-repeat;
        background-size: contain;
      }

      &.right_un {
        background: url('../../../images/active/right_un2.png') no-repeat;
        background-size: contain;
      }

      &.right_active {
        height: 56px;
        background: url('../../../images/active/right_active2.png') no-repeat;
        background-size: contain;
      }
    }
  }

  .active_content_wrap {
    width: 350px;
    margin: 0 auto;
    padding-bottom: 36px;

    .tit {
      width: 182px;
      height: 70px;
      margin: -22px auto 0;
    }

    &.left {
      .right_content {
        display: none;
      }

      .left_content {
        padding: 0.1px;
      }

      .left_content:first-of-type {
        margin-top: 38px;
        display: none;
        height: 0;
        // background: url('../../../images/active/left_content1.png') no-repeat;
        // background-size: contain;

        // .tit {
        //     background: url('../../../images/active/box_tit4.png') no-repeat;
        //     background-size: cover;
        // }
      }

      .left_content:nth-of-type(2) {
        margin: 40px 0;
        height: 361px;
        background: url('../../../images/active/left_content5.png') no-repeat;
        background-size: contain;

        .tit {
          background: url('../../../images/active/box_tit2.png') no-repeat;
          background-size: cover;
        }
      }

      .left_content:nth-of-type(3) {
        height: 671px;
        background: url('../../../images/active/left_content6.png') no-repeat;
        background-size: contain;

        .tit {
          background: url('../../../images/active/box_tit3.png') no-repeat;
          background-size: cover;
        }
      }
    }

    &.right {
      .left_content {
        display: none;
      }

      .right_content {
        margin-top: 38px;
        width: 100%;
        position: relative;

        .board_wrap {
          // min-height: 200px;
          border: 2px solid #fff;
          border-radius: 16px;
          padding: 6px;

          .cont {
            width: 100%;
            min-height: 200px;
            background: #ffffff;
            border-radius: 11px;
          }
        }

        .mask {
          width: 338px;
          height: 144px;
          background: url('../../../images/active/box_mask.png') no-repeat;
          background-size: contain;
          position: absolute;
          top: 6px;
          left: 6px;
        }

        .tit {
          position: absolute;
          // top: -0;
          left: 50%;
          transform: translateX(-50%);
          background: url('../../../images/active/box_tit1.png') no-repeat;
          background-size: contain;
        }

        .rank_list {
          // margin: 0 auto;
          padding: 49px 12px 20px;
          box-sizing: border-box;
        }
      }
    }

    .active_tips {
      text-align: center;
      font-size: 12px;
      color: #fff;
      padding: 16px 0 60px;
    }
  }

  .to_group {
    width: 328px;
    height: 55px;
    background: url('../../../images/active/to_group2.png') no-repeat;
    background-size: contain;
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
  }

  .my_cp {
    width: 100%;
    position: fixed;
    bottom: -2px;
    background: #ffffff;
    box-shadow: 0px -4px 34px rgba(139, 97, 214, 0.5);
    // background: url('../../../images/active/my_cp_bg.png') no-repeat;
    // background-size: contain;
    display: flex;
    align-items: center;
    padding: 16px 0 0 16px;
  }

  .rank_item {
    // margin: 0 auto;
    display: flex;
    align-items: center;
    height: 58px;
    margin-bottom: 16px;
    position: relative;

    .rank_num {
      color: #7d6dbe;
      font-weight: 500;
      font-size: 18px;
      margin-right: 12px;
      min-width: 20px;
    }

    .avatars {
      font-size: 0;
      display: flex;

      .avat {
        // display: inline-block;
        width: 55px;
        height: 55px;
        background: url('../../../images/active/avatar_bg.png') no-repeat;
        background-size: contain;
        margin-right: 2px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 94%;
          height: 94%;
          border-radius: 50%;
        }
      }
    }

    .info {
      margin-left: 8px;

      .nickanmes {
        width: 164px;
        color: #b7a4f7;
        font-weight: 500;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        display: flex;

        span {
          display: inline-block;
          max-width: 76px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }

      .points {
        color: #ff943c;
        font-size: 12px;
        font-weight: 500;
        height: 17px;
        line-height: 17px;
        background: url('../../../images/active/point_icon.png') no-repeat 0 50%;
        background-size: contain;
        padding-left: 26px;
      }
    }

    .status {
      width: 12px;
      height: 12px;

      &.up {
        background: url('../../../images/active/up.png') no-repeat;
        background-size: contain;
      }

      &.down {
        background: url('../../../images/active/down.png') no-repeat;
        background-size: contain;
      }

      &.none {
        background: url('../../../images/active/none.png') no-repeat;
        background-size: contain;
      }
    }
  }
}

// .App {
//     padding-top: 0px!important;
// }
